"use strict";
const data = [{
        'title': '大1',
        children: [{
                'desc': '二级1'
            }]
    }, {
        'title': '大2',
        children: [{
                'desc': '二级2'
            }]
    }, {
        'title': '大3',
        children: [{
                'desc': '二级3'
            }]
    }, {
        'title': '大4',
        children: [{
                'desc': '二级4'
            }]
    },
];
// 获取节点
const ulist = document.querySelector('.ulist');
const olist = document.querySelector('.olist');
// 渲染
ulist.innerHTML = data.map((v, i) => {
    return ` <li className="${i === 0 ? 'active' : ''}">${v.title}</li>`;
}).join('');
olist.innerHTML = data.map((v, i) => {
    return v.children.map((item, index) => {
        return ` <li  className="${i === 0 ? 'active' : ''}">${item.desc}</li>`;
    });
}).join('');
// 伪数组转数组
let Arrulist = Array.from(document.querySelectorAll('.ulist li'));
//  let Arrolist:Element[]|null=Array.from(document.querySelectorAll('.olist li'))
//  console.log(Arrolist)
// 循环遍历
Arrulist.forEach((v, i) => {
    // 添加点击事件
    v.addEventListener('click', e => {
        var _a, _b, _c;
        // 删除高亮
        (_b = (_a = document.querySelector('.ulist .active')) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('active');
        // 添加高亮
        v.classList.add('active');
        // 删除高亮
        (_c = document.querySelector('.olist .active')) === null || _c === void 0 ? void 0 : _c.classList.remove('active');
        // 添加高亮
        olist === null || olist === void 0 ? void 0 : olist.children[i].classList.add('active');
    });
});
